 <meta charset="UTF-8">
<style>
    ul {
        background-color: #ccc;
    }

    li {
        height: 30px;
        background-color: green;
        margin: 20px 0;
    }
</style>

<ul>
    <li>壮志饥餐胡虏肉</li>
    <li>笑谈渴饮匈奴血</li>
    <li>待从头</li>
    <li>收拾旧山河</li>
    <li>朝天阙</li>

</ul>

<div class="tips"
    style="pointer-events:none;position: absolute; width:200px;height:20px;background-color: #000; color:red;display:none;">
</div>


<script>
    var liObjs = document.querySelectorAll('li')
    liObjs.forEach(function (item, i) {
        // 移入：显示隐藏矿
        item.onmousemove = function (evt) {
            var e = evt || window.event
            var divObj = document.querySelector('div')
            divObj.style.display = 'block'
            divObj.style.left = e.clientX + 'px'
            divObj.style.top = e.clientY + 'px'
            divObj.innerText = this.innerText
        }
        // - 移出：隐藏提示框
        item.onmouseout = function () {
            var divObj = document.querySelector('div')
            divObj.style.display = 'none'
        }
    })
</script>